<!--点击画布显示信息-->
<template>
  <el-card class="ProjectMsgCard" style="height:100%;">
    <div slot="header">
      <span>工具流信息</span>
    </div>
    <div>
      <template v-if="currentProjectDetail.id">
        <el-form class="ProjectMsgForm" label-position="top" :model="currentProjectDetail">
          <el-form-item label="名称" style="margin-bottom: 10px;">
            <div class="content_item">
              {{currentProjectDetail.name}}
            </div>
          </el-form-item>
              <el-form-item label="密级" style="margin-bottom: 10px;">
            <div class="content_item">
              {{(currentProjectDetail.secretLevel=='1'?"非密":currentProjectDetail.secretLevel=='2'?"秘密":"机密")}}
<!--              {{(currentProjectDetail.secretLevel=='1'?"公开":currentProjectDetail.secretLevel=='2'?"一般":"重要")}}-->
            </div>
          </el-form-item>
              <el-form-item label="创建时间" style="margin-bottom: 10px;">
            <div class="content_item">
              {{parseTimeToDate(currentProjectDetail.createTime)}}
            </div>
          </el-form-item>
           <el-form-item label="最近打开时间" style="margin-bottom: 10px;">
            <div class="content_item">
              {{parseTimeToDate(currentProjectDetail.lastOpenTime)}}
            </div>
          </el-form-item>
          <!-- <el-form-item label="模式" style="margin-bottom: 10px;">
            <div class="content_item">
              {{currentProjectDetail.paralleled == true ? "分布式" : "单机"}}
            </div>
          </el-form-item> -->
          <el-form-item label="描述" style="margin-bottom: 10px;">
            <div class="content_item">
              {{currentProjectDetail.description || '无'}}
            </div>
          </el-form-item>
          <el-form-item label="协作团队" style="margin-bottom: 10px;">
            <div class="content_item">
<!--              {{(currentProjectDetail.team)}}-->
<!--              {{(currentProjectDetail.userName)}}-->
            </div>

            <el-button type="primary" size="mini" style="padding: 7px" @click="openChooseMember" v-if="this.$route.path === '/home/project'">选择协作团队</el-button>

<!--                                <span v-for="(item,index) in createDetail.userNameList.slice(0,8)" style="display: inline-block;">{{item +-->
<!--                                ( (index + 1 ) == createDetail.userNameList.slice(0,8).length ? '' :  ' ，') +-->
<!--                                  ( ( index + 1 ) == createDetail.userNameList.slice(0,8).length && createDetail.userNameList.length > 8 ? ' ...' : '')}}</span>-->

<!--                      <span v-for="(item,index) in createDetail.hasChooseMember.slice(0,8)" style="display: inline-block;">{{item.userName +-->
<!--                      ( (index + 1 ) == createDetail.hasChooseMember.slice(0,8).length ? '' :  ' ，') +-->
<!--                        ( ( index + 1 ) == createDetail.hasChooseMember.slice(0,8).length && createDetail.hasChooseMember.length > 8 ? ' ...' : '')}}</span>-->


            <el-table :data="tableTeamMember">
<!--              <el-table-column type="selection" width="55" align="center" />-->
              <el-table-column label="用户昵称" prop="nickName" align="center"/>
              <el-table-column label="密级" prop="secretLevel" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
<!--                  <el-tag type="success" effect="dark" v-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '1' ">非密</el-tag>-->
<!--                  <el-tag type="warning" effect="dark" v-else-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '2' ">秘密</el-tag>-->
<!--                  <el-tag type="danger" effect="dark" v-else-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '3' ">机密</el-tag>-->
<!--                  <span v-else>{{scope.row.secretLevel || '未设置'}}</span>-->
<!--                  <span v-else>{{ '未设置' }}</span>-->

                  <span v-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '1' " style="color:green;">公开</span>
                  <span v-else-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '2' " style="color:orange;">一般</span>
                  <span v-else-if="scope.row.secretLevel && scope.row.secretLevel.toString() === '3' " style="color:red;">重要</span>
<!--                  <span v-else>{{scope.row.secretLevel || '未知'}}</span>-->
                  <span v-else>{{ '未知' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="userName" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger"
                             :disabled="$route.path !== '/home/project'"
                             @click="deleteOneHasChoose(scope.row,scope.$index)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>


        </el-form>
      </template>
      <template v-else>
        <span style="color:red;margin-top:15px;display:block">未选择工程</span>
      </template>
    </div>


    <el-dialog
      :close-on-click-modal="false"
      :show-close="true"
      :close-on-press-escape="false"
      custom-class="chooseMemberDialogCss"
      width="820px"
      title="选择协作团队人员"
      :visible.sync="innerVisible"
      append-to-body>
      <div style="width: 780px;height: 530px;">
        <p class="memberTitleBox"><span>选择部门：</span><span>选择协作团队人员：</span><span>已选协作团队人员：</span></p>
        <div class="deptBox">
          <p class="everyDeptCss" v-for="(item) in deptList" :key="item.id"
             :style="{backgroundColor:item.id.toString() === nowChooseDept.id.toString() ? 'rgba(0,0,0,0.06)' : ''}"
             @click="chooseDeptFunc(item)">{{item.deptName}}</p>
          <p class="everyDeptCss" v-if="deptList.length < 1" style="text-align: center;color:rgba(0,0,0,0.4)">无数据</p>
        </div>
        <div class="memberBox">
          <p class="everyMemberCss" v-for="(item) in userData"  :key="item.id">
            <span class="everyMemberCss-name">{{item.nickName}}</span>
            <span class="everyMemberCss-icon el-icon-plus" @click="addSingleMember(item)"></span>
          </p>
          <p class="everyMemberCss" v-if="userData.length < 1" style="text-align: center;color:rgba(0,0,0,0.4)">无数据</p>
        </div>
        <div class="memberBox-hasChoose">
          <p class="everyMemberCss" v-for="(item,index) in chooseMemberDialog"  :key="item.id">
            <span class="everyMemberCss-name">{{item.nickName}}</span>
            <span class="everyMemberCss-icon el-icon-close" style="color: red;font-weight: bolder" @click="deleteSingleMember(item,index)"></span>
          </p>
          <p class="everyMemberCss" v-if="chooseMemberDialog.length < 1" style="text-align: center;color:rgba(0,0,0,0.4)">无数据</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
                  <el-button @click="closeChooseDialog" size="small">取 消</el-button>
        <el-button type="primary" @click="confirmChooseMember" size="small">确定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
import {
  getAllDeptList,
  modifyTeamMember,
  queryUserFromDeptId
} from "../../../api/sourceDetail";
import { mapGetters } from "vuex";

export default {
  name: "ProjectContentMsg",
  data() {
    return {
      nowChooseDept: {
        //当前选择的部门
        id: "",
        name: ""
      },

      deptList: [], //部门列表
      userData: [], //当前部门下所有人员列表
      innerVisible: false,

      // createDetail: {
      //   //创建工程的信息
      //   // projectName: "", //工程名
      //   // describe: "", //描述
      //   // paralleled: false, //模式，是否支持分布式
      //   // parentId: "", //父类id
      //   team: "", //协作团队   // 2023-01-12 被 hasChooseMember 替代
      //   // secretLevel: "", //密级
      //
      //   // chooseDeptIdList:[],//已经选的人员的部门的id
      //   // userIdList:[],//人员id列表
      //   // userNameList:['张三','李四','王五','张三','李四','王五','张三','李四','王五','张三','李四','王五'],//人员列表
      //
      //   hasChooseMember: []
      // },

      chooseMemberDialog: [], //dialog已选的人员
      tableTeamMember: []
    };
  },
  computed: {
    ...mapGetters(["httpServer"]),
    currentProjectDetail: function() {
      // console.log(
      //   "%c Line:66 🍆 this.$store.state.project.flowData.currentProjectDetail",
      //   "color:#fca650",
      //   this.$store.state.project.flowData.currentProjectDetail
      // );

      let newStr = JSON.parse(
        JSON.stringify(this.$store.state.project.flowData.currentProjectDetail)
      ).nickName;
      if (newStr) {
        this.tableTeamMember = [];
        let newMemberList = newStr.split(",");
        newMemberList &&
          newMemberList.forEach(ele => {
            this.tableTeamMember.push({
              nickName: ele.split(":")[0],
              secretLevel: ele.split(":")[1],
              deptId: ele.split(":")[2],
              id: Number(ele.split(":")[3]),
              oldStr: ele
            });
          });
      } else {
        this.tableTeamMember = [];
      }

      // console.log(this.tableTeamMember);
      // .split(',')
      // console.log(list);
      // tableTeamMember

      return this.$store.state.project.flowData.currentProjectDetail;
    },
    contentHeight() {
      var parentHeight = this.$store.state.project.flowData.propsContentHeight;
      return parentHeight - 60;
    }
  },
  methods: {
    parseTimeToDate: function(timeStep) {
      //将时间戳转成yyyy-mm-dd hh:mm:ss
      if (timeStep == null || timeStep == "" || timeStep == 0) {
        return null;
      }
      var time = new Date(timeStep);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.addNum(m) +
        "-" +
        this.addNum(d) +
        " " +
        this.addNum(h) +
        ":" +
        this.addNum(mm) +
        ":" +
        this.addNum(s)
      );
    },
    addNum: function(m) {
      return m < 10 ? "0" + m : m;
    },

    //打开选择人员弹框
    openChooseMember() {
      getAllDeptList().then(res => {
        // console.log(res);
        if (res.status === "SUCCESS") {
          this.deptList = res.data;
        }
      });
      this.chooseMemberDialog = JSON.parse(
        JSON.stringify(this.tableTeamMember)
      );
      this.innerVisible = true;
    },

    //选择部门
    chooseDeptFunc(item) {
      this.nowChooseDept = {
        id: item.id,
        name: item.deptName
      };
      queryUserFromDeptId(item.id).then(res => {
        // console.log(res);
        if (res.status === "SUCCESS") {
          this.userData = res.data;
        }
      });
    },

    //dialog添加一个人员
    addSingleMember(item) {
      let allChooseUserIdList = [];
      this.chooseMemberDialog.length &&
        this.chooseMemberDialog.forEach(val => {
          allChooseUserIdList.push(val.id);
        });
      if (allChooseUserIdList.length < 1) {
        this.chooseMemberDialog = this.chooseMemberDialog.concat(item);
      } else {
        if (allChooseUserIdList.indexOf(item.id) >= 0) {
          this.$message.info("已选该人员！");
          return;
        } else {
          this.chooseMemberDialog = this.chooseMemberDialog.concat(item);
        }
      }
    },

    //dialog删除一个人员
    deleteSingleMember(item, index) {
      this.chooseMemberDialog.splice(index, 1);
    },

    //dialog确认人选择人员
    confirmChooseMember() {
      this.innerVisible = false;
      this.nowChooseDept = {
        //当前选择的部门
        id: "",
        name: ""
      };
      this.userData = []; //当前部门下所有人员列表

      // console.log(this.chooseMemberDialog);
      let list = [];
      this.chooseMemberDialog.length &&
        this.chooseMemberDialog.forEach(ele => {
          let str =
            ele.userName +
            ":" +
            (ele.secretLevel || 0) +
            ":" +
            ele.deptId +
            ":" +
            ele.id;
          list.push(str);
        });
      let nick = [];
      this.chooseMemberDialog.length &&
        this.chooseMemberDialog.forEach(ele => {
          let str =
            ele.nickName +
            ":" +
            (ele.secretLevel || 0) +
            ":" +
            ele.deptId +
            ":" +
            ele.id;
          nick.push(str);
        });
      // console.log(list);
      // console.log(list.toString());
      // console.log(localStorage.getItem('userInfo'));
      // return

      this.saveFlow(() => {
        this.modifyTeamMemberFunc(list.toString(), nick.toString());
      });
    },

    //关闭弹框
    closeChooseDialog() {
      this.innerVisible = false;
      this.chooseMemberDialog = [];
      this.tableTeamMember = [];
    },

    modifyTeamMemberFunc(userName, nickName) {
      modifyTeamMember({
        id: Number(this.$route.query.id),
        userName: userName,
        nickName: nickName,
        userId: "" // 不用传了 id合并在userName 里面一起传了
      }).then(res => {
        // console.log(res);
        if (res.status === "SUCCESS") {
          this.$message.success(res.message + "!");
          this.$store.dispatch("getCurrentFlowJson", this.$route.query.id);
        } else {
          this.$message.error((res.message || "协作团队人员修改失败") + "!");
        }
      });
    },

    //table 移除一个人员
    deleteOneHasChoose(item, index) {
      this.tableTeamMember.splice(index, 1);
      // console.log(this.tableTeamMember);
      let list = [];
      this.tableTeamMember.length &&
        this.tableTeamMember.forEach(ele => {
          // let str = ele.userName + ':' + (ele.secretLevel || 0) + ':' + ele.deptId + ':' + ele.id
          // list.push(str)
          list.push(ele.oldStr);
        });
      this.saveFlow(() => {
        this.modifyTeamMemberFunc(list.toString());
      });
    },

    //保存流程
    //当前选中工程项
    saveFlow(cb) {
      if (this.$store.state.project.flowData.currentProjectDetail.id) {
        var that = this;
        var curProjectItem = this.$store.state.project.flowData
          .currentProjectDetail;
        var data = {};
        var nodes = this.$store.state.project.flowData.nodes;
        var links = this.$store.state.project.flowData.links;
        var compType = this.$store.state.project.systemComponents[0].children;
        let array1 = [];
        let array2 = [];

        compType.forEach(item => {
          item.children.forEach(aItem => {
            nodes.forEach(bItem => {
              // if (bItem.fileParse && bItem.fileParse.length > 0) {
              //   bItem.fileParse.splice(bItem.fileParse.length - 1, 1);
              // }
              if (
                aItem.name == bItem.name &&
                (item.name == "分类" ||
                  item.name == "回归" ||
                  item.name == "聚类" ||
                  item.name == "时序模型")
              ) {
                array1.push(item.name);
                array2.push(bItem.name);
              }
            });
          });
        });

        // console.log(nodes);

        // (data["modelType"] = array1), (data["modelAlgorithm"] = array2);
        data["modelType"] = array1;
        data["modelAlgorithm"] = array2;
        data["style"] = this.$store.state.project.flowData.contentStyle;
        data["nodes"] = nodes;
        data["links"] = links;

        // console.log(data)
        // return

        let formData = new FormData();
        formData.append("content", JSON.stringify(data));

        // console.log(this.httpServer);
        // return

        this.$.ajax({
          url: this.httpServer + "/api/project/" + curProjectItem.id,
          method: "post",
          data: formData,
          processData: false,
          contentType: false,
          beforeSend: function(xhr) {
            xhr.setRequestHeader("accessToken", localStorage.accessToken);
          },
          success: function(response) {
            // that.$notify({
            //   title: "提示",
            //   message: "保存成功",
            //   type: "success"
            // });

            cb && cb();
          },
          error: function(response) {
            that.$store.commit("dealRequestError", response);
            // cb && cb()
          }
        });
      } else {
        this.$notify({
          title: "提示",
          message: "请先选择工程！",
          type: "warning"
        });
      }
    }
  }
};
</script>
<style scoped>
.content_item {
  padding-left: 20px;
}

.el-card__body {
  padding: 5px;
}

.memberChooseCss {
  position: relative;
}
.deptBox {
  width: 218px;
  margin-right: 10px;
  height: 500px;
  /*background-color: forestgreen;*/
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px;
  float: left;
  overflow-y: auto;
}
.memberBox {
  width: 218px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-right: 10px;
  padding: 10px;
  height: 500px;
  /*background-color: gold;*/
  float: left;
  overflow-y: auto;
}
.memberBox-hasChoose {
  width: 258px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px;
  height: 500px;
  /*background-color: brown;*/
  float: left;
  overflow-y: auto;
}

.memberTitleBox {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.memberTitleBox span {
  display: inline-block;
  padding-left: 10px;
}
.memberTitleBox span:first-child {
  width: 240px;
  /*background-color: blue;*/
}
.memberTitleBox span:nth-child(2) {
  width: 240px;
  /*background-color: violet;*/
}
.memberTitleBox span:nth-child(3) {
  width: 270px;
  /*background-color: hotpink;*/
}

.everyDeptCss {
  width: calc(100% - 10px);
  padding-left: 10px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.everyDeptCss:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.everyMemberCss {
  width: calc(100% - 10px);
  /*background-color: forestgreen;*/
  padding-left: 10px;
  height: 26px;
  line-height: 26px;
  /*cursor: pointer;*/
  margin-bottom: 8px;
}
.everyMemberCss-name {
  display: inline-block;
  width: calc(100% - 30px);
  height: 26px;
  line-height: 26px;
  /*background-color: violet;*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
.everyMemberCss-icon {
  display: inline-block;
  /*background-color: firebrick;*/
  width: 30px;
  height: 26px;
  line-height: 26px;
  float: left;
  text-align: center;
  cursor: pointer;
}
.everyMemberCss:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
</style>
